<template>
    <div class="login-page">
      <!-- <div class="bg-img1"></div>
      <div class="bg-img2"></div> -->
      <img src="@/assets/img/bg1.png" alt="" class="bg-img1" />
      <img src="@/assets/img/bg2.png" alt="" class="bg-img2-1" />
      <img src="@/assets/img/bg2.png" alt="" class="bg-img2-2" />
      <!-- <img
        src="@/assets/img/language.png"
        alt="switch-language"
        class="language"
      /> -->
      <div class="login-box">
        <div class="login-wrapper">
          <div class="header">
            <img alt="logo" class="logo" src="@/assets/img/logo_baidu.png" />
            <h2 class="title_en">Welcome!</h2>
            <h5 class="title">欢迎您登录{{ systemName }}</h5>
          </div>
          <div class="login">
            <a-form @submit="onSubmit" :form="form">
              <!-- <a-tabs size="large" :tabBarStyle="{ textAlign: 'center' }" style="padding: 0 2px;">
            <a-tab-pane tab="账户密码登录" key="1"> -->
              <a-alert
                type="error"
                :closable="true"
                v-show="error"
                :message="error"
                showIcon
                style="margin-bottom: 24px"
              />
              <a-form-item class="input-box1">
                <a-input
                  autocomplete="autocomplete"
                  size="large"
                  placeholder="username"
                  v-decorator="[
                    'name',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入账户名',
                          whitespace: true,
                        },
                      ],
                    },
                  ]"
                >
                  <a-icon slot="prefix" type="user" style="color: #1890ff" />
                </a-input>
              </a-form-item>
              <a-form-item class="input-box2">
                <a-input
                  size="large"
                  placeholder="password"
                  autocomplete="autocomplete"
                  type="password"
                  v-decorator="[
                    'password',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入密码',
                          whitespace: true,
                        },
                      ],
                    },
                  ]"
                >
                  <a-icon slot="prefix" type="lock" style="color: #1890ff" />
                </a-input>
              </a-form-item>
              <!-- </a-tab-pane> -->
              <!-- <a-tab-pane tab="手机号登录" key="2">
            <a-form-item>
              <a-input size="large" placeholder="mobile number" >
                <a-icon slot="prefix" type="mobile" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-row :gutter="8" style="margin: 0 -4px">
                <a-col :span="16">
                  <a-input size="large" placeholder="captcha">
                    <a-icon slot="prefix" type="mail" />
                  </a-input>
                </a-col>
                <a-col :span="8" style="padding-left: 4px">
                  <a-button style="width: 100%" class="captcha-button" size="large">获取验证码</a-button>
                </a-col>
              </a-row>
            </a-form-item>
          </a-tab-pane> -->
              <!-- </a-tabs> -->
              <!-- <div>
          <a-checkbox :checked="true" >自动登录</a-checkbox>
          <a style="float: right">忘记密码</a>
        </div> -->
              <a-form-item>
                <a-button
                  :loading="logging"
                  style="width: 100%; margin-top: 24px"
                  size="large"
                  htmlType="submit"
                  type="primary"
                  >登录</a-button
                >
              </a-form-item>
              <!-- <div>
          其他登录方式
          <a-icon class="icon" type="alipay-circle" />
          <a-icon class="icon" type="taobao-circle" />
          <a-icon class="icon" type="weibo-circle" />
          <router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>
        </div> -->
            </a-form>
          </div>
        </div>
        <div class="turing-wrapper">
          <div class="quote" style="width: 400px;">
            <h1>HELLO HUMAN</h1>
            <div id="swiper-container" class="swiper-container" ref="mySwiper" :options="swiperOptions">
              <div class="swiper-wrapper">
                <div class="swiper-slide quote-en">
                  <p>
                    We can only see a short distance ahead. but we can see plenty
                    there that needs to be done.
                  </p>
                  <div class="name">
                    <span>-</span>
                    <h6>Alan Mathison Turing</h6>
                  </div>
                </div>
                <div class="swiper-slide quote-ch">
                  <p>
                    我们只能看到前面不远的地方。但我们可以看到，还有很多事情需要做。
                  </p>
                  <div class="name">
                    <span>--</span>
                    <h6>艾伦·麦席森·图灵</h6>
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
            <!-- <swiper ref="mySwiper" :options="swiperOptions" class="quoteSwiper">
              <swiper-slide class="quote-en">
                <p>
                  We can only see a short distance ahead. but we can see plenty
                  there that needs to be done.
                </p>
                <div class="name">
                  <span>-</span>
                  <h6>Alan Mathison Turing</h6>
                </div>
              </swiper-slide>
              <swiper-slide class="quote-ch">
                <p>
                  我们只能看到前面不远的地方。但我们可以看到，还有很多事情需要做。
                </p>
                <div class="name">
                  <span>--</span>
                  <h6>艾伦·麦席森·图灵</h6>
                </div>
              </swiper-slide>
              <Pagination class="swiper-pagination" slot="pagination">
              </Pagination>
            </swiper> -->
          </div>
          <img
            src="@/assets/img/turing.png"
            alt="A photo of Alan Mathison Turing"
            class="turing-img"
          />
        </div>
      </div>
    </div>
</template>

<script>
// import CommonLayout from '@/layouts/CommonLayout'
import { getRoutesConfig } from "@/services/user";
import { setAuthorization } from "@/utils/request";
import { loadRoutes } from "@/utils/routerUtil";
import { mapMutations } from "vuex";
import { login } from "@/api/modules/login";
import Swiper, { Pagination } from 'swiper' // js 模块
import 'swiper/swiper-bundle.css' // css 模块
Swiper.use([Pagination])
export default {
  name: "Login",
  // components: {
  //   CommonLayout,
  // },
  
  data() {
    return {
      logging: false,
      error: "",
      form: this.$form.createForm(this),
      swiperOptions: {
        autoplay: 4000,
        speed: 2500,
        loop: true,
        noSwiping: false,
        autoplayDisableOnInteraction: false,
        pagination: {
          el: ".swiper-pagination",
          // paginationBulletRender: function (swiper, index, className) {
          //   return '<span class="' + className + '"><i></i></span>';
          // },
          // renderBullet(className) {
          //   return `<span class="${className} swiper-pagination-bullets-custom"></span>`;
          // },

          clickable: true,
        },
      },
    };
  },
  mounted(){
    new Swiper('.swiper-container',this.swiperOptions)
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    },
  },
  created() {
    // const _this = this;
    this.$store.dispatch("user/check_userInfo").then((isLogin) => {
      if (isLogin) {
        // _this.$message.success('已登录')
        // _this.$router.push('/device/list')
      }
    });
  },
  methods: {
    ...mapMutations("account", ["setUser", "setPermissions", "setRoles"]),
    onSubmit(e) {
      const _this = this;
      e.preventDefault();
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true;
          const name = this.form.getFieldValue("name");
          const password = this.form.getFieldValue("password");

          //登入
          const params = {
            account: name,
            password,
          };
          login(params)
            .then((res) => {
              console.log(res);
              _this.$message.success("登录成功");
              _this.logging = false;
              _this.$store.commit("user/save_userInfo", res.data);
              _this.$router.push(process.env.VUE_APP_HOME_PATH);
              _this.$store.commit("user/setShowUnlogin", true);
            })
            .catch(() => {
              _this.logging = false;
            });
        }
      });
    },
    afterLogin(res) {
      this.logging = false;
      const loginRes = res.data;
      if (loginRes.code >= 0) {
        const { user, permissions, roles } = loginRes.data;
        this.setUser(user);
        this.setPermissions(permissions);
        this.setRoles(roles);
        setAuthorization({
          token: loginRes.data.token,
          expireAt: new Date(loginRes.data.expireAt),
        });
        // 获取路由配置
        getRoutesConfig().then((result) => {
          const routesConfig = result.data.data;
          loadRoutes(routesConfig);
          this.$router.push("/device/list");
          this.$message.success(loginRes.message, 3);
        });
      } else {
        this.error = loginRes.message;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-container,.swiper-wrapper{
  width: 100%;
}
.swiper-wrapper{
  height: 200px;
}

#swiper-container /deep/ .swiper-pagination{
  transform: translateX(50%);
  text-align: left;
}
#swiper-container /deep/ .swiper-pagination-bullet{
  transition: width .6s, border-radius .6s;
}
#swiper-container /deep/ .swiper-pagination-bullet-active{
  width: 25px;
  border-radius: 5px;
  transition: width .6s;
}

@font-face {
  font-family: "PingFangSC-regular";
  src: url("/assets/font/PingFangSC-regular.ttf"); //你的资源目录
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PingFangSC-semibold";
  src: url("/assets/font/PingFangSC-semibold.ttf"); //你的资源目录
  font-weight: normal;
  font-style: normal;
}
// .swiper-pagination {
//   left: 50%;
// }
.swiper-pagination-bullet {
  width: 25px;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 0;
}
.swiper-pagination-bullet:first-of-type {
  margin-right: 15px;
}
.swiper-pagination-bullet-active {
  /* width: 30px; */
  /* 动画必须转成块级元素 */
  // display: block;
  position: relative;
  z-index: 999;
  background: #fff;
  height: 3px;
  // animation: mymove 5s linear;
}
.login-page {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #41a1fa;

  .bg-img1,
  .bg-img2-1,
  .bg-img2-2 {
    position: absolute;
    filter: invert(50%) sepia(37%) saturate(6209%) hue-rotate(188deg)
      brightness(98%) contrast(100%);
  }
  .bg-img1 {
    top: 0;
    left: 0;
    width: 26.92708vw;
    height: 28.17708vw;
    @media screen and (min-width: 1440px) {
      width: 387.741px;
      height: 405.741px;
    }
  }
  .bg-img2-1 {
    bottom: 0;
    right: 0;
    width: 38.75vw;
    filter: invert(50%) sepia(31%) saturate(3178%) hue-rotate(186deg)
      brightness(99%) contrast(99%);
    @media screen and (min-width: 1440px) {
      width: 558px;
    }
  }
  .bg-img2-2 {
    bottom: 0;
    right: 0;
    width: 34.75vw;
    @media screen and (min-width: 1440px) {
      width: 500px;
    }
  }
  // .language {
  //   position: absolute;
  //   cursor: pointer;
  //   top: 0.8333vw;
  //   right: 0.8333vw;
  //   width: 2.5vw;
  //   height: 2.5vw;
  // }

  .login-box {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // align-items: center;
    width: 88.47222%;
    height: 78.11111%;
    background: #ffffff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.25);
    @media screen and (min-width: 1440px) {
      width: 1274px;
      height: 703px;
    }

    .login-wrapper {
      width: 37.2057%;
      // height: 56.4722%;
      padding: 8.0557vw 5.139vw 0 5.5557vw;
      @media screen and (min-width: 1440px) {
        padding: 116px 74px 0 80px;
      }

      .header {
        .logo {
          width: 3.0557vw;
          height: 3.0557vw;
          margin-bottom: 1.25vw;
          @media screen and (min-width: 1440px) {
            width: 44px;
            height: 44px;
            margin-bottom: 18px;
          }
        }

        .title_en {
          font-size: 2.2224vw;
          margin-bottom: 0.05208vw;
          line-height: 1.5;
          font-family: PingFangSC-semibold;
          font-weight: 600;
          @media screen and (min-width: 1440px) {
            font-size: 32px;
            margin-bottom: 1px;
          }
        }

        .title {
          font-size: 1.25vw;
          color: #666666;
          font-family: PingFangSC-regular;
          letter-spacing: 0.05208vw;
          margin-bottom: 3.4026vw;
          @media screen and (min-width: 1440px) {
            font-size: 18px;
            letter-spacing: 0.75px;
            margin-bottom: 49px;
          }
        }
      }
    }

    .turing-wrapper {
      display: flex;
      flex-wrap: nowrap;
      width: 62.7943%;
      height: 100%;
      background-color: #fafafa;
      padding: 9.5833vw 2.3609vw 0 4.79167vw;
      @media screen and (min-width: 1440px) {
        padding: 138px 34px 0 69px;
      }

      .quote {
        display: flex;
        flex-direction: column;
        padding-top: 3.0557vw;
        @media screen and (min-width: 1440px) {
          padding-top: 44px;
        }

        h1 {
          font-family: Courier;
          font-size: 3.3333vw;
          margin-bottom: 1.0416vw;
          font-weight: 600;
          @media screen and (min-width: 1440px) {
            font-size: 48px;
            margin-bottom: 15px;
          }
        }
      }
    }

    .turing-img {
      width: 18.125vw;
      height: 20.41667vw;
      margin-top: 4vw;
      @media screen and (min-width: 1440px) {
        width: 261px;
        height: 294px;
        margin-top: 57.6px;
      }
    }
  }
}
.quoteSwiper {
  width: 30vw;
  overflow: hidden;
  @media screen and (min-width: 1440px) {
    width: 432px;
  }
}
.quoteSwiper p {
  font-family: Courier;
  color: #666666;
  font-size: 1.389vw;
  font-weight: 600;
  margin-bottom: 0 !important;
  @media screen and (min-width: 1440px) {
    font-size: 20px;
  }
}

.name {
  // align-self: flex-end;
  float: right;
  font-family: Courier;
  font-style: italic;
  margin-top: 3.6vw;
  margin-right: 3.19427vw;
  @media screen and (min-width: 1440px) {
    margin-top: 64.8px;
    margin-right: 46px;
  }
}
.name span {
  margin-right: 1.8625vw;
  font-size: 1.1109vw;
  font-weight: 600 !important;
  color: #666666;
  @media screen and (min-width: 1440px) {
    margin-right: 26.82px;
    font-size: 16px;
  }
}

.name h6 {
  display: inline-block;
  color: #666666;
  font-weight: 600 !important;
  font-size: 1.1109vw;
  @media screen and (min-width: 1440px) {
    font-size: 16px;
  }
}
// .quote-ch,
// .quote-en {
//   display: flex;
// }

.quote-ch p,
.quote-ch span,
.quote-ch h6 {
  font-style: italic;
  font-family: PingFangSC-regular;
  font-size: 0.9723vw;
  letter-spacing: 0.2604vw;
  line-height: 2;
  font-weight: 500 !important;
  @media screen and (min-width: 1440px) {
    font-size: 14px;
    letter-spacing: 3.8px;
  }
}
.quote-ch p {
  font-style: normal;
}

// /deep/ .ant-carousel {
//   overflow: hidden;
//   p {
//     font-family: Courier;
//     color: #666666;
//     font-size: 1.389vw;
//     font-weight: 600;
//     margin-bottom: 0 !important;
//   }

//   .name {
//     align-self: flex-end;
//     font-family: Courier;
//     font-style: italic;
//     margin-top: 4.5vw;
//     margin-right: 3.19427vw;

//     span {
//       margin-right: 1.8625vw;
//       font-size: 1.1109vw;
//       font-weight: 600 !important;
//       color: #666666;
//     }

//     h6 {
//       display: inline-block;
//       color: #666666;
//       font-weight: 600 !important;
//       font-size: 1.1109vw;
//     }
//   }
// }

/deep/ .ant-input,
.ant-input-lg {
  height: 3.3333vw;
  font-size: 1.1109vw;
  @media screen and (min-width: 1440px) {
    font-size: 16px;
    height: 48px;
  }
}

/deep/ .ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 9.3057vw;
  transition: all 0.7s ease;
  @media screen and (min-width: 1440px) {
    padding-left: 134px;
  }
}

/deep/ .ant-input-affix-wrapper .ant-input:not(:first-child):hover {
  padding-left: 2.6041vw;
  @media screen and (min-width: 1440px) {
    padding-left: 37.5px;
  }
}
/deep/ .ant-input-affix-wrapper .ant-input:not(:first-child):focus {
  padding-left: 2.6041vw;
  @media screen and (min-width: 1440px) {
    padding-left: 37.5px;
  }
}
/deep/ .anticon svg {
  width: 0.9323vw;
  height: 0.987vw;
  @media screen and (min-width: 1440px) {
    width: 13.5px;
    height: 14.2px;
  }
}
/deep/ .ant-input-affix-wrapper .ant-input-prefix {
  left: 0.9229vw;
  @media screen and (min-width: 1440px) {
    left: 13.3px;
  }
}

/deep/ .ant-btn-lg {
  height: 3.3333vw;
  margin-top: 0 !important;
  @media screen and (min-width: 1440px) {
    height: 46px;
  }
}
/deep/ .ant-btn-lg span {
  font-size: 1.1109vw;
  @media screen and (min-width: 1440px) {
    font-size: 16px;
  }
}

.login {
  margin: 0 auto;

  @media screen and (max-width: 576px) {
    width: 95%;
  }

  @media screen and (max-width: 320px) {
    .captcha-button {
      font-size: 14px;
    }
  }

  .icon {
    font-size: 24px;
    // color: @text-color-second;
    color: #41a1fa;
    margin-left: 16px;
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: @primary-color;
    }
  }
}

.common-layout .content {
  padding: 0 !important;
}

.ant-input-prefix {
  color: #41a1fa !important;
}

.input-box1 {
  margin-bottom: 1.389vw !important;
  @media screen and (min-width: 1440px) {
    margin-bottom: 20px !important;
  }
}
.input-box2 {
  margin-bottom: 3.3333vw !important;
  @media screen and (min-width: 1440px) {
    margin-bottom: 48px !important;
  }
}
</style>
